<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="/WEB-INF/template.xhtml"
                xmlns:framework="http://java.sun.com/jsf/composite/components">
    <ui:define name="head">
        <h:outputScript library="components" name="/leftTree/initialize.js"/>
        <h:outputStylesheet library="components" name="/leftTree/initialize.css"/>
        <h:outputStylesheet>
            body .ui-inputgroup .ui-inputgroup-addon {
                min-width: unset !important;
            }
        </h:outputStylesheet>
    </ui:define>
    <ui:define name="content">
        <h:form id="resource_form" prependId="false">
            <p:outputPanel styleClass="p-grid p-nogutter">
                <p:outputPanel id="resource_menu_panel" styleClass="p-col-12 p-md-2">
                    <h:outputScript>
                        $(function () {
                            initTree(PF('resource_menu').jq[0])
                        })
                    </h:outputScript>
                    <p:treeTable id="resource_menu" widgetVar="resource_menu" value="#{viewScope.rootTree}"
                                 var="element"
                                 selectionMode="single" nodeVar="nodeVar" showGridlines="false"
                                 selection="#{viewScope.selectedNode}" filterEvent="enter"
                                 styleClass="left-tree">
                        <p:ajax event="select" listener="#{controller.onNodeSelect}" process="@this"
                                update="resource:dataTable" global="false"/>
                        <p:ajax event="unselect" listener="#{controller.onNodeUnselect}" process="@this"
                                update="resource:dataTable" global="false"/>
                        <p:ajax event="expand" process="@this"
                                update="resource:dataTable" global="false"/>
                        <p:ajax event="collapse" process="@this"
                                update="resource:dataTable" global="false"/>
                        <f:facet name="header">
                            <div class="ui-input-icon-left" style="width:100%;margin-bottom: 1px;">
                                <i class="pi pi-search"/>
                                <p:inputText id="globalFilter" onkeydown="if(event.keyCode == 13) return false"
                                             onkeyup="if(event.keyCode == 13){PF('resource_menu').filter()}"
                                             placeholder="#{msg['framework']['enterKeyword']}"/>
                            </div>
                        </f:facet>

                        <p:column filterable="true" filterBy="title"
                                  styleClass="tree-column">
                            <f:facet name="header">
                                <h:outputText value="#{msg['blog']['menu']}"/>
                            </f:facet>
                            <f:facet name="filter">
                                <p:inputText style="display: none"/>
                            </f:facet>
                            <i class="pi pi-#{element.icon} p-mr-3"/>
                            <h:outputText value="#{element.title}"/>
                            <p:outputPanel layout="inline" styleClass="tree-column-right">

                                <h:outputText styleClass="sub-title"
                                              value="#{element.code}"/>
                                <p:outputPanel styleClass="opts" style="display: none">
                                    <p:commandLink
                                            action="#{controller.edit}" process="@this"
                                            update="@widgetVar(resource_dialog)"
                                            oncomplete="PF('resource_dialog').show()"
                                            styleClass="p-md-3">
                                        <i class="pi pi-pencil"/>
                                        <f:setPropertyActionListener value="#{nodeVar}"
                                                                     target="#{viewScope.selectedNode}"/>
                                        <f:param name="resourceType" value="MENU"/>

                                    </p:commandLink>
                                    <p:commandLink
                                            action="#{controller.delete}" process="@this"
                                            update="resource_menu_panel" oncomplete="location.reload()">
                                        <i class="pi pi-trash"/>
                                        <f:setPropertyActionListener value="#{nodeVar}"
                                                                     target="#{viewScope.selectedNode}"/>
                                        <f:param name="resourceType" value="MENU"/>
                                        <p:confirm type="popup" header="#{msg['framework']['message']}"
                                                   message="#{msg['framework']['confirmDeletion']}"
                                                   icon="pi pi-exclamation-triangle"/>
                                    </p:commandLink>
                                </p:outputPanel>
                            </p:outputPanel>
                        </p:column>
                    </p:treeTable>
                    <p:commandButton value="#{msg['framework']['add']}" icon="pi pi-plus" style="width: 100%"
                                     action="#{controller.add}" update="@widgetVar(resource_dialog)"
                                     oncomplete="PF('resource_dialog').show()">
                        <f:param name="resourceType" value="MENU"/>
                    </p:commandButton>
                </p:outputPanel>

                <p:outputPanel styleClass="p-col-12 p-md-10">
                    <framework:dataTable id="resource" formDialogId="resource"
                                         headText="#{msg['blog']['dictManagement']}"
                                         value="#{viewScope.list}" draggableRows="true"
                                         singleSelection="#{viewScope.sinSelected}"
                                         multipleSelection="#{viewScope.mulSelected}">
                        <p:ajax event="rowReorder" listener="#{controller.onRowReorder}" global="false"
                                update="resource:dataTable"/>

                        <p:ajax event="cellEdit" listener="#{controller.cellEdit}" global="false"
                                update="@widgetVar(resource_dataTable)"/>


                        <p:column headerText="#{msg['blog']['seq']}" width="200"
                                  field="level" filterable="false" sortable="false">
                            <h:outputText value="#{index+1}"/>
                        </p:column>

                        <p:column headerText="#{msg['blog']['title']}" width="200"
                                  field="title" filterable="false" sortable="false" filterMatchMode="equals"/>
                        <p:column headerText="#{msg['blog']['perms']}" width="100" responsivePriority="2"
                                  field="perms" filterable="false" sortable="false" filterMatchMode="equals"/>
                        <p:column headerText="#{msg['blog']['display']}" width="100" responsivePriority="3"
                                  field="display" filterable="false" sortable="false" filterMatchMode="equals"/>
                    </framework:dataTable>
                </p:outputPanel>
            </p:outputPanel>
        </h:form>
    </ui:define>
    <ui:define name="dialog">
        <h:form id="dialog_form">
            <framework:dialog id="resource" value="#{viewScope.vo}"
                              saveComplete="#{viewScope.vo.type eq 'MENU' ? 'location.reload()' : ''}"
                              saveUpdate="@widgetVar(resource_dataTable)">
                <framework:label target="parent" value="#{msg['blog']['parent']}">
                    <p:tree id="parent" widgetVar="parent" value="#{viewScope.rootTree}"
                            style="max-height: 250px; overflow: auto"
                            var="node" datakey="#{node.id}" selection="#{viewScope.vo.parent}"
                            selectionMode="single">

                        <p:ajax event="select" listener="#{controller.onParentSelect}" process="@this"
                                update="@(.resource-path)" global="false"/>

                        <p:ajax event="unselect" listener="#{controller.onParentUnselect}" process="@this"
                                update="@(.resource-path)" global="false"/>

                        <p:treeNode>
                            <h:outputText value="#{node.title}"/>
                        </p:treeNode>
                    </p:tree>
                </framework:label>

                <framework:label widgetVar="path" target="path"
                                 value="#{viewScope.vo.type eq 'MENU' ? msg['blog']['path'] : msg['blog']['perms']}"
                                 styleClass="p-col-12 p-md-6 resource-path">
                    <div class="ui-inputgroup">
                        <div class="ui-inputgroup-addon ">#{viewScope.path}</div>
                        <p:inputText id="path" value="#{viewScope.vo.code}" required="true"/>
                    </div>
                </framework:label>

                <framework:label target="title" value="#{msg['blog']['title']}" styleClass="p-col-12 p-md-6">
                    <p:inputText id="title"
                                 value="#{viewScope.vo.title}"
                                 required="true"/>
                </framework:label>

                <framework:label rendered="#{viewScope.vo.type eq 'MENU'}" target="icon" value="#{msg['blog']['icon']}"
                                 styleClass="p-col-12 p-md-6"
                                 indicateRequired="true">
                    <p:outputPanel class="ui-inputgroup">
                        <p:outputPanel styleClass="ui-input-icon-left" style="width: 100%">
                            <i class="pi pi-#{viewScope.vo.icon}"/>
                            <p:inputText id="icon" value="#{viewScope.vo.icon}"
                                         label="#{msg['blog']['title']}" readonly="true"/>
                        </p:outputPanel>

                        <p:commandButton widgetVar="iconBtn" id="iconBtn" immediate="true"
                                         icon="pi pi-ellipsis-h"/>
                        <p:overlayPanel widgetVar="iconPanel" for="iconBtn"
                                        style="width:500px; height: 500px; overflow-y: auto"
                                        dynamic="true">
                            <div id="icons-grid" class="p-grid p-ac-center">
                                <p:repeat value="#{viewScope.icons}" var="icon">
                                    <p:commandButton icon="pi pi-#{icon}" title="#{icon}" label="#{icon}"
                                                     update="@(.ui-input-icon-left)" process="@this"
                                                     oncomplete="PF('iconPanel').hide()"
                                                     styleClass="ui-button-secondary ui-button-flat p-col-12 p-md-2">
                                        <f:setPropertyActionListener value="#{icon}" target="#{viewScope.vo.icon}"/>
                                    </p:commandButton>
                                </p:repeat>
                            </div>
                        </p:overlayPanel>
                    </p:outputPanel>
                </framework:label>

                <framework:label rendered="#{viewScope.vo.type eq 'MENU'}" widgetVar="target" target="target"
                                 value="#{msg['blog']['resourceTarget']}" styleClass="p-col-12 p-md-6">
                    <p:selectOneMenu id="target" value="#{viewScope.vo.target}" autoWidth="true">
                        <f:selectItems value="#{viewScope.targets}" var="target"
                                       itemLabel="#{target.title}" itemValue="#{target}"/>
                    </p:selectOneMenu>
                </framework:label>


            </framework:dialog>
        </h:form>
    </ui:define>
</ui:composition>